status/network: Handle VPN connections in VPN section

Right now the indicator itself tracks all devices and connections,
creates and destroys the corresponding menu items, matches them
to a section and updates the connection/device arrays that are
attached to the section.

Sounds messy?

It is slightly less effective to connect multiple handlers to the
same NMClient, but let's assume that devices and connections aren't
added/removed at 60 frames/s, and we can add some readabilty by
moving the code into different classes that only have to care about
the bits that are relevant to them.

The VPN section is a good starting point, because its handling is
already quite different from device sections.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2407>

diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index e7979e03b8bbb1c333f5e629365e3ccdc87eeea8..890a3e5bea26dd8d1760fe6202acabec879a543e 100644 (file)
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -1565,11 +1565,69 @@ var NMVpnSection = class extends NMConnectionSection {
     constructor(client) {
         super(client);
 
-        this.item.menu.addSettingsAction(_("VPN Settings"), 'gnome-network-panel.desktop');
+        this._client.connectObject(
+            'connection-added', (c, conn) => this.checkConnection(conn),
+            'connection-removed', (c, conn) => this.removeConnection(conn),
+            'notify::active-connections', () => this._syncActiveConnections(),
+            this);
+
+        this.item.menu.addSettingsAction(_('VPN Settings'),
+            'gnome-network-panel.desktop');
+
+        this._loadInitialItems();
+        this._sync();
+    }
+
+    _loadInitialItems() {
+        const connections = this._client.get_connections();
+        for (const conn of connections)
+            this.checkConnection(conn);
+
+        this._syncActiveConnections();
+    }
+
+    _syncActiveConnections() {
+        const activeConnections =
+            this._client.get_active_connections().filter(
+                c => this._shouldHandleConnection(c.connection));
+
+        for (const item of this._connectionItems.values())
+            item.setActiveConnection(null);
+
+        for (const a of activeConnections)
+            this._connectionItems.get(a.connection.get_uuid())?.setActiveConnection(a);
 
         this._sync();
     }
 
+    _shouldHandleConnection(connection) {
+        const setting = connection.get_setting_connection();
+        if (!setting)
+            return false;
+
+        // Ignore slave connection
+        if (setting.get_master())
+            return false;
+
+        const handledTypes = [
+            NM.SETTING_VPN_SETTING_NAME,
+            NM.SETTING_WIREGUARD_SETTING_NAME,
+        ];
+        return handledTypes.includes(setting.type);
+    }
+
+    _addConnection(connection) {
+        super._addConnection(connection);
+
+        connection.connectObject(
+            'changed', () => this.checkConnection(connection),
+            this);
+    }
+
+    _connectionValid(connection) {
+        return this._shouldHandleConnection(connection);
+    }
+
     _sync() {
         let nItems = this._connectionItems.size;
         this.item.visible = nItems > 0;
@@ -1607,19 +1665,6 @@ var NMVpnSection = class extends NMConnectionSection {
         this._client.deactivate_connection(activeConnection, null);
     }
 
-    setActiveConnections(vpnConnections) {
-        let connections = this._connectionItems.values();
-        for (let item of connections)
-            item.setActiveConnection(null);
-
-        vpnConnections.forEach(a => {
-            if (a.connection) {
-                let item = this._connectionItems.get(a.connection.get_uuid());
-                item.setActiveConnection(a);
-            }
-        });
-    }
-
     _makeConnectionItem(connection) {
         return new NMVpnConnectionItem(this, connection);
     }
@@ -1764,8 +1809,6 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._ctypes[NM.SETTING_BLUETOOTH_SETTING_NAME] = NMConnectionCategory.BLUETOOTH;
         this._ctypes[NM.SETTING_CDMA_SETTING_NAME] = NMConnectionCategory.WWAN;
         this._ctypes[NM.SETTING_GSM_SETTING_NAME] = NMConnectionCategory.WWAN;
-        this._ctypes[NM.SETTING_VPN_SETTING_NAME] = NMConnectionCategory.VPN;
-        this._ctypes[NM.SETTING_WIREGUARD_SETTING_NAME] = NMConnectionCategory.VPN;
 
         this._getClient().catch(logError);
     }
@@ -1773,7 +1816,6 @@ class Indicator extends PanelMenu.SystemIndicator {
     async _getClient() {
         this._client = await NM.Client.new_async(null);
 
-        this._activeConnections = [];
         this._connections = [];
         this._connectivityQueue = new Set();
 
@@ -1805,7 +1847,6 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._readConnections();
         this._readDevices();
         this._syncMainConnection();
-        this._syncVpnConnections();
 
         this._client.bind_property('nm-running',
             this, 'visible',
@@ -1818,7 +1859,6 @@ class Indicator extends PanelMenu.SystemIndicator {
             'notify::state', () => this._updateIcon(),
             'notify::primary-connection', () => this._syncMainConnection(),
             'notify::activating-connection', () => this._syncMainConnection(),
-            'notify::active-connections', () => this._syncVpnConnections(),
             'notify::connectivity', () => this._syncConnectivity(),
             'device-added', this._deviceAdded.bind(this),
             'device-removed', this._deviceRemoved.bind(this),
@@ -1993,18 +2033,6 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._syncConnectivity();
     }
 
-    _syncVpnConnections() {
-        let activeConnections = this._client.get_active_connections() || [];
-        let vpnConnections = activeConnections.filter(
-            a => a instanceof NM.VpnConnection || a.get_connection_type() === 'wireguard');
-        vpnConnections.forEach(a => {
-            ensureActiveConnectionProps(a);
-        });
-        this._vpnSection.setActiveConnections(vpnConnections);
-
-        this._updateIcon();
-    }
-
     _mainConnectionStateChanged() {
         if (this._mainConnection.state === NM.ActiveConnectionState.ACTIVATED)
             this._notification?.destroy();
@@ -2079,15 +2107,11 @@ class Indicator extends PanelMenu.SystemIndicator {
         if (section == NMConnectionCategory.INVALID)
             return;
 
-        if (section == NMConnectionCategory.VPN) {
-            this._vpnSection.checkConnection(connection);
-        } else {
-            const {devices} = this._deviceSections.get(section);
-            devices.forEach(wrapper => {
-                if (wrapper instanceof NMConnectionSection)
-                    wrapper.checkConnection(connection);
-            });
-        }
+        const {devices} = this._deviceSections.get(section);
+        devices.forEach(wrapper => {
+            if (wrapper instanceof NMConnectionSection)
+                wrapper.checkConnection(connection);
+        });
     }
 
     _flushConnectivityQueue() {